<template>
  <form>
    <view class="forget">
      <view class="tab p90">绑定新手机号</view>
      <view class="h20"></view>
      <!-- 验证手机号  -->
      <view class="code p90">
        <view class="box" :class="{active: isAct}">
          <view class="label">新手机号</view>
          <view class="inpt">
            <input class="input" type="number" v-model="mobile" @focus="getActive(0)" name = "phone" placeholder="请输入手机号">
          </view>
        </view>
        <view class="box" :class="{active: !isAct}">
          <view class="label">验证码</view>
          <view class="inpt"><input type="number" placeholder="请输入验证码" @focus="getActive(1)" v-model="code"></view>
          <view class="line">
            <span v-if="!timer" @click="getCode">获取验证码</span>
            <span v-else>重发{{count}}s</span>
          </view>
        </view> 
        <button type="primary" class="sub-btn" @click="validFormData">确认绑定</button>
      </view>
    </view>
  </form>
</template>
  
<script>
import {ShortMessageSendCode,UpdateMobile} from '@/service/user/user.service.js' 
import { multiDistrict } from '@/unit/common.js'
import graceChecker  from '@/unit/graceChecker.js'
export default {
  data () {
    return {
      mobile: '',
      code: '',
      isAct: true,
      timer: null,
      count: 0
    }
  },
  onLoad (option) {
    // this.code = option.code;
  },
  methods: {
    getActive (index) {
      this.isAct = index == 0;
    },
    validFormData () {
      //定义表单规则
      var rule = [
        {name: "mobile", checkType: "notnull", checkRule: "", errorMsg: "请输入手机号"},
        {name: "mobile", checkType: "phoneno", checkRule: "", errorMsg: "请输入合法的手机号"}
      ];
      //进行表单检查
      var checkRes = graceChecker.check({
        mobile: this.mobile
      }, rule);
      if(checkRes){
        this.nextStep ()
      }else{
        uni.showToast({ title: graceChecker.error, icon: "none" });
      }
    },
    // 获取验证码
    getCode () {
      ShortMessageSendCode({
        mobile: this.mobile,
        type: 6
      }, (res) =>{
        if (res.status == 0) {
          this.countDown ()
          uni.showToast({
            title: '验证码发送成功！',
            icon: 'none'
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        };
      })
    },
    //确认绑定，修改手机号
    nextStep () {
      UpdateMobile({ 
        mobile: this.mobile, 
        code: this.code,
      }, (res) => {
        if ( res.status == 0 ){
          uni.showToast({
            title:'绑定成功！',
            icon:'none',
            success: () => {
              setTimeout(function () {
                uni.navigateTo({
                  url: '/pages/user/personalData',
                })
              }, 2000);
            }
          });
        }else{
          uni.showToast({
            title:res.msg,
            icon:'none'
          })
        }
      })
    },
    countDown () { // 倒计时
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    }
  },
}
 
</script>

<style scoped lang="scss">
.p90 {
  padding: 0 90rpx;
}
.h20 {
  width: 100%;
  height: 20rpx;
  background-color: #FAFAFA;
  margin-top: 15rpx;
}
.forget {
  color: #333333;
  padding-top: 146rpx;
  .tab {
    font-size: 36rpx;
    text-align: left;
    font-weight: bold;
  }
  .setNewPwd {
    margin-top: 23rpx;
    .text {
      font-size: 24rpx;
      color: #999999;
    }
  }
  
  .sub-btn {
    margin-top: 112rpx;
    height: 70rpx;
    line-height: 70rpx;
    background: #636363;
    border-radius: 10rpx;
    color: #F6DA99;
    font-size: 30rpx;
    text-align: center;
    &.active {
      background-color: #434343;
      color: #F6DA99;
    }
  }
}
.box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 40rpx 0;
  font-size: 28rpx;
  border-bottom: 1rpx solid #E1E1E1;
  &.active {
    border-color: #F6DA99;
  }
  .name {
    width: 82rpx;
    font-size: 28rpx;
  }
  
  .label {
    width: 120rpx;
  }
  .inpt {
    // width: 320rpx;
    flex: 1;
    margin-left: 40rpx;
    input{
      font-size: 28rpx;
      font-weight:500;
    }
  }
  .clear-margin {
    margin: 0px;
  }
  
  .code-input {
    .uni-input-placeholder {
      font-size: 24rpx;
    }
  }
  .line {
    flex: 1;
    // width: 120rpx;
    text-align: right;
    font-size: 24rpx;
  }
}

.setNewPwd-title {
  font-size: 24rpx;
  font-weight:500;
  color: #999999;
}
.setNewPwd-phone {
  font-size: 24rpx;
  font-weight:500;
  line-height: 40rpx;
  color: #999999;
}

</style>
